<template>
    <div class="q-menu-warp">
        <el-menu default-active="0" class="q-menu-main" :collapse="isCollapse" router>
            <template v-for="(item, key) in this.menuData">
                <el-submenu :index="key.toString()" v-if="item.children">
                    <template slot="title">
                        <i :class="item.avatar" class="nav-icon" v-if="item.avatar"></i>
                        <span slot="title">{{item.title}}</span>
                    </template>
                    <template v-for="(child, index) in item.children">
                        <el-menu-item :index="key.toString() + '-'+ index.toString()" :route="child.path">
                            <i :class="child.avatar" class="nav-icon" v-if="child.avatar"></i>
                            <span slot="title">{{child.title}}</span>
                        </el-menu-item>
                    </template>

                </el-submenu>
                <el-menu-item :index="key.toString()" :route="item.path" v-else>
                    <i :class="item.avatar" class="nav-icon" v-if="item.avatar"></i>
                    <span slot="title">{{item.title}}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>

    import { mapMutations } from 'vuex'
    export default {
        name: "NavMenu",
        props: {
            isCollapse: {
                type:Boolean,
                default: false
            },
            menuData:{
                type: Array
            }
        },
        beforeCreate: function() {
            console.log('------beforeCreate创建前状态------');

        },
        created: function() {
            console.group('------created创建完毕状态------');

        },
        beforeMount: function() {
            console.log('------beforeMount挂载前状态------');

        },
        mounted: function() {
            console.log('------mounted 挂载结束状态------');
            
        },
        beforeUpdate: function () {
            console.log('beforeUpdate 更新前状态===============》');

        },
        updated: function () {
            console.log('updated 更新完成状态===============》');

        },
        beforeDestroy: function () {
            console.log('beforeDestroy 销毁前状态===============》');

        },
        destroyed: function () {
            console.log('destroyed 销毁完成状态===============》');

        },
        computed: {
            
        },
        data() {
            return {
            };
        },
        methods: {
        
        }
    }
</script>

<style lang="less" >

    .q-menu-warp,.q-menu-main{
        height: 100%;

    }
    .q-menu-warp{
        position: absolute;
    }
    .q-menu-main{
        &:not(.el-menu--collapse) {
            width: 249px;
        }
    }
</style>